<template>
    <div class="goodsdetail">
        <Head :left="true" title="商品详情" :right="true">
            <template>
                <van-icon name="share" size="22" color="#333" @click="showShare = true"/>
            </template>
        </Head>

        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        />

        <div class="detail_swiper sub-child">
            <van-swipe @change="onChange">
            <van-swipe-item >
                <img :src="goodsdetail.image_url" alt="">
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/1</div>
            </template>
        </van-swipe>
        </div>


        <div class="detail_price_box">p
            <div class="left">
                <h5>折扣价: {{goodsdetail.final_price}} ₽</h5>
                <p><span class="spl">专柜价 {{goodsdetail.original_price}} ₽</span> <span class="spr">{{((goodsdetail.final_price/goodsdetail.original_price)*10).toFixed(2)}} 折</span></p>
            </div>
            <div class="right">
                <h6>参考价</h6>
                <p>￥ {{goodsdetail.cny_price}}</p>
            </div>
        </div>

        <div class="detail_title_box">
            <div class="detail_title">
                <h3>{{goodsdetail.name}}</h3>
                <span>包邮</span>
            </div>
            <div class="like" @click="show=!show">
                <van-icon v-if="show" name="like-o" size="25"/>
                <van-icon v-else name="like" color="red" size="25"/>
                <span>收藏</span>
            </div>
        </div>

        <div class="hongkongtrip_box">
            <p>
                香港专区 极速开启购物之旅 
            </p>
            <div class="gobox" @click="gotolist">
                <span>去逛逛</span>
                <van-icon name="arrow" size="8px"/>
            </div>
        </div>

        <div class="trust_box">
            <p> <span>保障</span> 100%正品，假一赔十，20天价保，售后无忧</p>
        </div>

        <div class="trust_box">
            <h6>
                <van-icon name="checked" size="15" color="#f3c623"/>
                正品保障
            </h6>
            <h6>
                <van-icon name="map-marked" size="15" color="#f3c623"/>
                海外直邮
            </h6>
            <h6>
                <van-icon name="smile-comment" size="15" color="#f3c623" />
                售后无忧
            </h6>
        </div>


        <div class="goods_special_box">
            <p>商品详情</p>
        </div>
        <div class="detial_show">
            <ul>
                <li>
                    <p>品牌名</p>
                    <span>{{goodsdetail.brand}}</span>
                </li>
                <li>
                    <p>商品名</p>
                    <span>{{goodsdetail.name}}</span>
                </li>
                <li>
                    <p>重量</p>
                    <span>{{goodsdetail.weight}} kg</span>
                </li>
            </ul>
        </div>

        <div class="detial_foot">
            <router-link class="iconbtn" :to="{name:'home'}">
                <van-icon name="shop-o" size="25" />
                <p>首页</p>
            </router-link>
            <router-link class="iconbtn" :to="{name:'cart'}">
                <van-icon name="shopping-cart-o" size="25" />
                <p>购物车</p>
            </router-link>
            <div class="iconbtn">
                <van-icon name="service-o" size="25" />
                <p>客服</p>
            </div>

            <div class="putincart" @click="showPopup">
                <p>加入购物车</p>
            </div>
            <div class="buyitnow" @click="showPopupbuy">
                <p>立即购买</p>
            </div>
        </div>

<!-- 加入购物车的隐藏框 -->
        <van-popup class="detail_option_box" v-model="isshow" position="bottom" :style="{ height: '60%' }" >
            <div class="showgoods">
                <div class="topbox">
                    <img :src="goodsdetail.image_url" alt="">
                    <div class="g_des">
                        <h3>{{goodsdetail.name}}</h3>
                        <h4>{{goodsdetail.final_price}} ₽ 参考价:{{goodsdetail.cny_price}}</h4>
                        <p>重量:{{goodsdetail.weight}}</p>
                    </div>
                </div>
                <div class="numchoice">
                    <span>购买数量</span>
                    <van-stepper v-model="value" />
                </div>
            </div>
            <div class="putincart_foot" >
                <p @click="putintocart">确认添加到购物车</p>
            </div>
        </van-popup>

<!-- 立即购买的隐藏框 -->
        <van-popup class="detail_option_box" v-model="isbuyshow" position="bottom" :style="{ height: '60%' }" >
            <div class="showgoods">
                <div class="topbox">
                    <img :src="goodsdetail.image_url" alt="">
                    <div class="g_des">
                        <h3>{{goodsdetail.name}}</h3>
                        <h4>{{goodsdetail.final_price}} ₽ 参考价:{{goodsdetail.cny_price}}</h4>
                        <p>重量:{{goodsdetail.weight}}</p>
                    </div>
                </div>
                <div class="numchoice">
                    <span>购买数量</span>
                    <van-stepper v-model="value" />
                </div>
            </div>
            <div class="putincart_foot" @click="gotocash">
                <p>确认购买</p>
            </div>
        </van-popup>
        

    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
     
  data() {
    return {
        value:1,
        goodsdetail:{},
        current: 0,
        show:true,
        isshow:false,
        isbuyshow:false,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],


    };
  },
  methods: {
    
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onChange(index) {
      this.current = index;
    },
    showPopup(){
        this.isshow = true;
    },
    showPopupbuy(){
        this.isbuyshow = true;
    },
    putintocart(){
        // console.log(111)
        if(localStorage.getItem("mobile")){
             this.$ajax.insertCart({
                "mobile":localStorage.getItem('mobile'),
                "count":this.value,
                "name": this.goodsdetail.name,
                "original_price": this.goodsdetail.original_price,
                "final_price": this.goodsdetail.final_price,
                "image_url": this.goodsdetail.image_url,
                "weight":  this.goodsdetail.weight,
                "cny_price": this.goodsdetail.cny_price,
                "check":false,
            }).then(res=>{
                if(res.code==200){
                    Toast.success(res.msg);
                }else{
                    Toast.fail(res.msg);
                }
            })
        }else{
         Toast.fail('您还未登录，请先登录');
        }
    },
     gotocash(){
        // console.log(222)
        if(localStorage.getItem("mobile")){
             this.$ajax.imbuy({
                "mobile":localStorage.getItem('mobile'),
                "count":this.value,
                "name": this.goodsdetail.name,
                "original_price": this.goodsdetail.original_price,
                "final_price": this.goodsdetail.final_price,
                "image_url": this.goodsdetail.image_url,
                "weight":  this.goodsdetail.weight,
                "cny_price": this.goodsdetail.cny_price,
                "check":true,
            }).then(res=>{
                
                    // Toast.success(res.msg);
                    this.$router.push({name:'cash'})
                
            })
        }else{
         Toast.fail('您还未登录，请先登录');
        }
        
    },
    gotolist(){
        this.$router.push({name:'goodslist'})
    },
    
  },

  mounted(){
      this.$ajax.getWruruGoodsdetail({
          name:this.$route.query.name
      }).then(res=>{
            this.goodsdetail=res.result;
      })
  },
}
</script>



<style lang="scss" scoped>
.detail_option_box{
    // position: relative;
    .putincart_foot{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 39px;
        padding: 6.5px 0;
        background-color: #333;
        text-align: center;
        color: #fff;
        line-height: 39px;
       
    }
    .showgoods{
        padding: 13px;
        .topbox{
            display: flex;
            img{
                width: 97.5px;
                height: 97.5px;
            }
            .g_des{
                font-size: 14px;
                h3{
                    font-weight: bold;
                }
                h4{
                    color: red;
                }
            }
        }
        .numchoice{
            display: flex;
            padding: 13px 0;
            justify-content: space-between;
            margin-top: 13px;
            span{
                font-size: 16px;
                font-weight: bold;
                line-height: 26px;
            }
        }
    }
}
.detial_foot{
    position: fixed;
    bottom: 0;
    height: 52px;
    width: 100%;
    background-color: #fff;
    display: flex;
    .iconbtn{
        width: 16%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding-top: 1.2px;
    }
    .putincart{
        width: 24%;
        text-align: center;
        color: #333;
        font-size: 14px;
        padding: 0 6.5px;
        line-height: 52px;
        background-image: linear-gradient(90deg,#fae0a2,#f6cb7c);
    }
    .buyitnow{
        flex: 1;
        text-align: center;
        color: #fff;
        font-size: 14px;
        padding: 0 6.5px;
        line-height: 52px;
        background: #333;
    }

}
.goodsdetail{
    padding-bottom: 80px;
    background-color: #fff;
}
.detial_show{
    padding: 6.5px;
    background-color: #fff;
    ul{
        border: 1px solid #999;
        border-bottom: none;
        li{
            display: flex;
            border-bottom: 1px solid #999;
            p{
                width: 25%;
                border-right: 1px solid #999;
                padding: 6.5px 0;
                text-align: center;
                font-size: 14px;
            }
            span{
                flex: 1;
                  padding: 6.5px ;
                text-align: center;
                font-size: 14px;
            }
        }
    }

}
.goods_special_box{
    padding: 13px;
    background-color: #333;
    text-align: center;
    font-size: 14px;
    color: #fff;
}
.trust_box{
    padding: 13px;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #999999;
    p{
        font-weight: bold;
        span{
            padding-right: 6.5px;
            color: #999999;
        }
    }
    h6{
        font-size: 10px;
    }
}
    .hongkongtrip_box{
        padding: 13px;
        display: flex;
        justify-content: space-between;
        background-color: #333;
        color: #fff;
        font-size: 14px;
     
    }
    .detail_title_box{
        background-color: #fff;
        padding: 0 13px;
        display: flex;
        .detail_title{
            width: 85%;
            padding: 13px;
            h3{
                font-size: 18px;
                font-weight: bold;
            }
            span{
                display: inline-block;
                border: 1px solid #333;
                margin-top: 6.5px;
                margin-bottom: 13px;
                padding: 2px 5px;
                margin-right: 6.5px;
                font-size: 10px;
                border-radius: 3px;
            }
        }
        .like{
            
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color:#a3a3a3;

        }
    }
    .detail_price_box{
        display: flex;
        padding: 6.5px;
        height: 52px;
        background-color: #333;
        .left{
            width: 60%;
            color: white;
            h5{
                font-size: 20px;
            }
            p{
                font-size: 14px;
                font-weight: normal;
                .spl{
                    text-decoration: line-through;
                }
                .spr{
                    border: 1px solid white;
                    padding: 0 6.5px;
                    margin-left: 6.5px;
                }
            }
        }
        .right{
            flex: 1;
            background-image: linear-gradient(135deg,transparent 37px,#fae0a2,#f6cb7c 0);
            padding-right: 13px;
            h6,p{
                font-size: 18px;
                font-weight: bold;
                text-align: right;
                padding-top: 6.5px;
            }
            p{
                font-size: 14px;
                padding-top: 0;
            }
        }
    }
    .custom-indicator {
        
    position: absolute;
    right: 15px;
    bottom: 25px;
    padding: 6.5px 13px;
    border-radius: 20px;
    font-size: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.3);
  }
  .detail_swiper{
      width: 100%;
    //   height: 414px;
      img{
          width: 100%;
      }
  }
</style>